The hooks [`data()`](/data), [`onBeforeRender()`](/onBeforeRender), [`onRenderHtml()`](/onRenderHtml), and
[`onBeforeRoute()`](/onBeforeRoute) enable us to extend `pageContext`.

```js
// +onBeforeRender.js

export { onBeforeRender }

async function onBeforeRender(pageContext) {
  const starWarsMovies = await getStarWarsMovies()
  return {
    pageContext: {
      // We make `starWarsMovies` available at `pageContext.starWarsMovies`
      starWarsMovies
    }
  }
}

async function getStarWarsMovies() {
  const response = await fetch('https://star-wars.brillout.com/api/films.json')
  const { movies } = await response.json()
  return movies
}
```

## Don't mutate `pageContext`

In general, we should try to avoid mutating `pageContext`:

```js
// +onBeforeRender.js

export { onBeforeRender }

function onBeforeRender(pageContext) {
  const starWarsMovies = await getStarWarsMovies()
  pageContext.starWarsMovies = starWarsMovies // [!code --]
  // We should do this instead // [!code ++]
  return { // [!code ++]
    pageContext: { // [!code ++]
      starWarsMovies // [!code ++]
    } // [!code ++]
  } // [!code ++]
}
```

> **Why?** Mutations make reasoning harder; it is easier to think in terms of extending an immutable object.

> While nothing stops us from mutating `pageContext` today, future Vike versions will print a warning discouraging us from mutations (although we will be able to escape hatch and suppress the warning as some rare use cases warrant mutations).

## Don't return entire `pageContext`

We also shouldn't do this:

```js
// +onBeforeRender.js

export { onBeforeRender }

function onBeforeRender(pageContext) {
  const starWarsMovies = await getStarWarsMovies()
  return {
    pageContext: { // [!code --]
      ...pageContext, // [!code --]
      starWarsMovies // [!code --]
    } // [!code --]
    // Do this instead // [!code ++]
    pageContext: { // [!code ++]
      starWarsMovies // [!code ++]
    } // [!code ++]
  }
}
```

> **Why?** See argument above about mutations.
